<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2固定定位技巧2</title>
  <style>
    .mask{
      background-color: rgba(0,0,0,0.2);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .mask:hover{
      transform: scale(0.1);/*缩小*/
      /*display: none;消失*/
    }
  </style>
</head>
<body>
<div class="mask">

</div>
<div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab beatae distinctio dolorem enim error esse et,
    eveniet ex excepturi exercitationem fugit id inventore natus neque qui saepe voluptatem! Error, id!
  </div>
  <div>Aliquam animi dolorum eius expedita, explicabo laboriosam libero magnam nam nostrum optio provident quam quis ut
    vitae voluptates. Corporis dolore ea eos maiores quo ut voluptate? Alias expedita laborum ratione?
  </div>
  <div>Autem consequuntur dolorem earum, error iusto maxime nisi omnis perferendis porro praesentium quas quia quo
    soluta tempora voluptates. Ab ad cupiditate dolorem, esse excepturi fugit illum modi omnis recusandae voluptatum.
  </div>
  <div>Assumenda cumque doloribus ex, expedita explicabo fugit magni omnis perspiciatis quidem, temporibus tenetur
    velit. Aliquid at atque blanditiis cum deserunt est eveniet harum hic iste, maxime officiis quod repellat suscipit.
  </div>
  <div>Assumenda deserunt, dolor dolore ea eos ex exercitationem fugit ipsa minima, quaerat quia quo recusandae repellat
    repellendus reprehenderit tempore velit veniam? Accusamus eum incidunt nisi numquam, optio reiciendis repellat
    reprehenderit!
  </div>
  <div>Deserunt dolore earum in minus nesciunt officiis provident voluptate voluptatem, voluptatibus! Aut consequuntur
    fugiat ipsam libero minus molestiae perspiciatis suscipit? Commodi delectus ducimus eveniet non omnis optio quos
    tempora voluptate.
  </div>
  <div>Amet, impedit, reprehenderit. Ab deserunt esse iusto quo veritatis. A alias assumenda corporis eveniet expedita
    facilis, in nobis nostrum obcaecati quidem reprehenderit repudiandae rerum sapiente sit, vel veritatis vitae
    voluptas.
  </div>
  <div>A aperiam, consequuntur ducimus harum ipsam molestias natus non praesentium qui quos rem tempora? Dolor doloribus
    iure officia voluptates! Consequuntur deleniti ex labore magnam nobis provident sunt tenetur totam voluptate.
  </div>
  <div>At deserunt dignissimos eum incidunt obcaecati porro quisquam rem! Ad error officia soluta! Assumenda,
    dignissimos eius exercitationem, explicabo fugit incidunt laudantium libero molestiae natus obcaecati quia sint sit
    soluta suscipit?
  </div>
  <div>Culpa debitis distinctio dolor ea exercitationem harum laudantium molestiae necessitatibus obcaecati quas
    ratione, rem, rerum sit totam ullam velit voluptate? Consequatur ex laudantium molestias odit praesentium. Modi
    mollitia nemo reiciendis.
  </div>
  <div>Animi dolore esse est eum laudantium quasi quos sint. Accusantium architecto at ducimus eaque impedit odit
    pariatur perspiciatis, possimus provident quae quas qui quia rem, sapiente tenetur! Doloribus, excepturi, quis.
  </div>
  <div>Corporis, dicta dolores esse explicabo id inventore laboriosam laborum magnam, nam odio quam quidem ratione
    soluta. Corporis dolore doloremque, ex molestias nihil obcaecati pariatur repellendus similique tempora temporibus
    ut voluptas?
  </div>
  <div>A accusamus aliquam animi libero perspiciatis quas quod rem veritatis voluptas voluptatem. Autem cumque dolor
    dolorem earum eos excepturi explicabo fugiat hic, illum, iure minima quasi qui sequi, suscipit ut.
  </div>
  <div>Dicta dolor enim explicabo mollitia omnis ratione repellendus sequi sunt tempore vero. Aperiam corporis
    exercitationem illo maiores molestiae quia quidem repellendus sit soluta tenetur voluptate voluptates, voluptatum.
    Ad, ipsa, quidem.
  </div>
  <div>Animi aspernatur consequatur consequuntur dolorem dolorum est hic in ipsam itaque laborum minima modi non
    nostrum, numquam officia omnis provident quae quod recusandae sequi similique sint sunt tempora temporibus unde.
  </div>
  <div>Accusamus consequatur cum cupiditate deleniti distinctio doloribus ducimus earum error esse eum facere id modi
    mollitia nam necessitatibus nihil, nulla pariatur perferendis quibusdam quisquam reiciendis rem similique suscipit
    tenetur vitae.
  </div>
  <div>Aliquid in nihil perferendis quae quos? Ad aliquam itaque quis. Alias at expedita officiis rerum tenetur. Alias
    autem, debitis et id ipsam nisi nulla obcaecati quos, repellat similique ut veritatis.
  </div>
  <div>Amet blanditiis deserunt distinctio, error et ex ipsum, iure laboriosam, minus molestias nemo nobis officia quasi
    quos saepe sequi sunt. Alias et laudantium magnam minima modi neque saepe tempore voluptatem.
  </div>
  <div>Culpa dolorem in molestias nemo nulla obcaecati quaerat quasi qui ratione voluptatum! A amet atque commodi
    consequatur, dicta dolorem eum hic minus neque nobis possimus sed, sequi vel, vitae voluptatum.
  </div>
  <div>Aut cupiditate debitis dicta dolorum earum eius illo inventore iste labore, maxime, natus, necessitatibus
    nesciunt nostrum obcaecati odit officia optio quis reiciendis rem repudiandae suscipit ut vel veniam vero voluptas?
  </div>
  <div>Accusamus, excepturi in odio officiis optio quo sapiente. A adipisci cum ea earum facere, harum minima nobis
    officia officiis pariatur possimus quas quis saepe tempore vero. Asperiores consequuntur dolore quaerat!
  </div>
  <div>Illo in labore libero, maxime molestias nisi, odit, omnis quae qui quidem sapiente similique tempore temporibus.
    Consequuntur distinctio hic iste maiores, minima nisi quae quas repellat sunt suscipit temporibus voluptatem!
  </div>
  <div>Autem, consequatur dolor dolorum eaque enim esse, modi molestiae nisi officia quisquam recusandae reiciendis,
    ullam vitae. Accusantium beatae eius magnam maiores minus neque nesciunt nihil, quas reprehenderit sunt tenetur
    voluptatibus.
  </div>
  <div>Ab aliquam aliquid cumque dolores ducimus eaque eligendi enim est eum illum in iste iusto labore laboriosam
    numquam odio praesentium quam quas quidem quos reiciendis rerum, vel, velit veniam vitae?
  </div>
  <div>Aliquam autem culpa, debitis deserunt eos et exercitationem explicabo inventore ipsum, libero minus, obcaecati
    officia optio quae reiciendis repellendus sed soluta veniam vitae voluptatem. Ipsum minus quibusdam recusandae
    repellendus ullam.
  </div>
  <div>Ab est excepturi, impedit iure molestiae pariatur placeat quae saepe temporibus ut, velit voluptatem? Adipisci id
    modi necessitatibus nihil quidem quo sapiente sequi sint sunt voluptate! Eveniet libero non sapiente.
  </div>
  <div>Aperiam iste laborum mollitia nam nemo praesentium, quaerat quas. Blanditiis debitis dolorem dolorum eius error
    eveniet rem. Aliquam consectetur deleniti dolore doloribus illum ipsam, laborum non quaerat, sed sit veritatis.
  </div>
  <div>Aliquid amet animi consectetur consequuntur deleniti distinctio ea eaque et eveniet fuga fugit illum ipsam ipsum
    laborum libero odit pariatur possimus quaerat saepe suscipit temporibus, tenetur velit veniam veritatis voluptatem!
  </div>
  <div>Animi aspernatur at cum dolore doloremque eum eveniet facere facilis fugit illum, in, iure libero nobis non odio
    quia quisquam reiciendis sed sint sunt unde vel vero voluptate. Odit, quis!
  </div>
  <div>Ab accusamus aperiam beatae consequuntur cum dicta enim illum in ipsam iure magnam maiores neque nobis omnis
    pariatur quam ratione repellat repudiandae sunt, suscipit ullam voluptas voluptatem? Aut, nesciunt, rem.
  </div>
  <div>Aut beatae cupiditate eaque eos molestiae natus perferendis quia similique veniam veritatis. Aliquid amet at
    dicta explicabo ipsa, iusto labore molestias natus nesciunt nobis, quae quia quidem sed suscipit, voluptates.
  </div>
  <div>Accusamus alias dicta dolore dolores ducimus eius esse est et, eveniet impedit libero maiores modi nesciunt
    obcaecati pariatur possimus quasi quos recusandae, rem repellendus, tempore velit veniam veritatis vero voluptates.
  </div>
  <div>Aperiam assumenda ducimus impedit laboriosam nostrum suscipit, voluptatem voluptatibus! Accusantium alias atque
    consequatur cumque distinctio doloremque impedit itaque laboriosam, molestias nemo non nostrum, officia porro
    quibusdam ratione sint tempore vitae?
  </div>
  <div>Deleniti dignissimos dolore eius ipsam nam optio, qui. Animi consequatur eos iusto maiores sit sunt tempore
    temporibus unde vel. Ab aspernatur eius error eum nulla quidem repellendus temporibus, velit veniam.
  </div>
  <div>Asperiores blanditiis harum, illo incidunt magni minus nam quas quasi reiciendis voluptas? Amet consequuntur
    cumque cupiditate dolorum eaque eos eum minima? Animi dolorem eius iusto libero natus nostrum numquam provident!
  </div>
  <div>Aliquam amet aperiam asperiores beatae commodi debitis ducimus impedit incidunt iste modi nisi odit, officiis
    saepe sed tempore unde vel voluptate! Dignissimos doloremque error nobis sapiente sed? Nemo quis, sint.
  </div>
  <div>Beatae consectetur dicta, dolores eos magni neque nostrum reprehenderit? Beatae cum eligendi non qui quibusdam
    repudiandae, saepe tenetur. Accusamus asperiores doloribus illum laborum nobis quia, quis rerum similique sint
    voluptates.
  </div>
  <div>Accusamus adipisci atque aut culpa deserunt dolore dolorem ducimus eius eligendi explicabo in ipsam iusto labore
    minus nesciunt odit porro, quae, quam quas quia quidem recusandae repellat sed similique suscipit?
  </div>
  <div>Aliquid, assumenda consectetur dolores ducimus eaque eos iste labore molestiae nobis nulla odio optio perferendis
    porro provident quam qui, quidem quos recusandae reprehenderit sunt tempore tenetur ut voluptas voluptatem
    voluptatibus.
  </div>
  <div>Alias autem facere nisi, quia suscipit temporibus vero? Commodi eos est harum magni modi necessitatibus omnis
    quam. Aut consectetur culpa dolores ducimus ipsum modi nam officiis optio, perspiciatis quaerat vero?
  </div>
</div>
</body>
</html>